<template>
    <div>
        <div aria-multiselectable="true" class="panel-group" id="rightMenuAccordion" role="tablist">
            <div :key="index" class="panel panel-default"
                 v-for="(item,index) in ['afterHair','temples','bang','stayMAO']">
                <div :href="'#collapse'+item" class="panel-heading" data-parent="#rightMenuAccordion"
                     data-toggle="collapse">
                    <h4 class="panel-title">
                        <a>{{aFullFace[item].name}}调整</a>
                    </h4>
                </div>
                <div :id="'collapse'+item" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">{{aFullFace[item].name}}色相：</div>
                                <input class="form-control" max="360" min="0" placeholder="Amount" type="number"
                                       v-model="aFullFace[item].hue">
                            </div>
                            <br>
                            <input max="360" min="0" step="1" type="range" v-model="aFullFace[item].hue"/>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">{{aFullFace[item].name}}亮度：</div>
                                <input class="form-control" max="200" min="0" placeholder="Amount" type="number"
                                       v-model="aFullFace[item].brightness">
                                <div class="input-group-addon">%</div>
                            </div>
                            <br>
                            <input :id="index+'brightness'" max="200" min="0" step="1" type="range"
                                   v-model="aFullFace[item].brightness"/>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">{{aFullFace[item].name}}饱和度：</div>
                                <input class="form-control" max="200" min="0" placeholder="Amount" type="number"
                                       v-model="aFullFace[item].saturate">
                                <div class="input-group-addon">%</div>
                            </div>
                            <br>
                            <input :id="index+'saturate'" max="200" min="0" step="1" type="range"
                                   v-model="aFullFace[item].saturate"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RightMenu",
        props: ["aFullFace"]
    }
</script>

<style scoped>

</style>
